<template>
    <!-- width: 16.66%; -->
    <a-card-grid class="ContentItem" @click="runApp">
        <a-badge :dot="!!(detail.mapping.localVersion != detail.mapping.netVersion && detail.mapping.netVersion && detail.mapping.progress === null)">
            <div class="image">
                <a-popover v-model:visible="visible" :title="detail.name" placement="right" trigger="hover">
                    <template #content>
                        <span v-if="detail.mapping.localVersion != detail.mapping.netVersion && props.detail.mapping.netVersion">
                            有新版本！
                            v{{detail.mapping.netVersion}}
                            &nbsp;&nbsp;
                            <a-button type="primary" danger size="small" @click="update">更新</a-button>
                        </span>
                        <span v-else-if="detail.mapping.localVersion == detail.mapping.netVersion && props.detail.mapping.netVersion"> 已经是最新版本 v{{detail.mapping.localVersion}}</span>
                        <span v-else>当前版本 v{{detail.mapping.localVersion}}</span>
                    </template>
                    <img :src="detail.icon" alt="" @dragstart.prevent>
                </a-popover>
            </div>
        </a-badge>
        <div class="imageMark" v-if="detail.mapping.progress !== null">
            <svg class="schedule-svg" width="40" height="40" style="transform: rotate(-90deg);border-radius: 50%;">
                <circle id="progress" cx="20" cy="20" r="20" stroke-width="40" fill="rgba(0,0,0,0)" stroke="rgba(255,255,255,0.7)" stroke-dasharray="314" :stroke-dashoffset="(1 - detail.mapping.progress / 100 * 0.4) * 314 " />
            </svg>
        </div>
        <div class="Name">{{ detail.mapping.progress !== null ? '下载中' : props.detail.title }}</div>
    </a-card-grid>
</template>
<script setup>
const props = defineProps({  //获取传参的数据
    detail: Object,
})

import { ref, renderList } from 'vue';
import { useStore } from 'vuex'
const visible = ref(false);
const store = useStore();

const update = () => {
    visible.value = false;
    store.dispatch('Install', props.detail.key);
}

const runApp = () => {
    if (props.detail.mapping.progress !== null) return;
    store.dispatch('RunApp', props.detail);
}


</script>

<style scoped>
.ContentItem {
    position: relative;
    width: 16.66%;
    text-align: center;
    padding: 10px 0;
    transition: background 0.3s;
    cursor: pointer;
}
.ContentItem:hover {
    background-color: rgba(255, 255, 255, 0.5);
}
.ContentItem :deep(.ant-badge-dot) {
    width: 10px;
    height: 10px;
    top: 9px;
    right: 9px;
}

.image {
    position: relative;
    cursor: pointer;
    width: 60px;
    height: 60px;
    margin: 0 auto;
}
.image img {
    position: absolute;
    left: 50%;
    margin: 0 0 0 -30px;
    top: 0;
    width: 60px;
    height: 60px;
    display: block;
    border-radius: 10px;
}

.imageMark {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 10px;
    background-color: rgba(0, 0, 0, 0.4);
    left: 50%;
    margin: 0 0 0 -30px;
    border-radius: 10px;
}
.imageMark svg {
    margin: 10px 0 0 0;
}

.Name {
    padding-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>